<template>
  <div>
    <span>
      用户名:
      <input type="text" v-model.lazy="name" />
    </span>
    <span>{{tip}}</span>
  </div>
</template>
<script>
  import { setup, ref, watch } from "vue";
  export default {
    setup() {
      const name = ref("");
      const tip = ref("");
      watch(name, (newValue, oldValue) => {
        console.log(`旧值是:${oldValue}, 新值是:${newValue}`);
        setTimeout(function(){
          if (newValue == "admin") {
            tip.value = "用户名已经存在，请更换一个";
          } else {
            tip.value = "用户名可以使用";
          }
        },1000)
      });
      return {
        name,
        tip
      };
    }
  };
</script>